<!--
 * @Description: 收益记录
 -->
<template>
  <div>
    <div class="chooseTime" @click="showPicker = true">
      <div>{{chooseDate | moment("YYYY年MM月")}}&nbsp;</div>
      <van-icon name="arrow-down" />
    </div>
    <van-popup v-model="showPicker" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="year-month"
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="formatter"
        @cancel="showPicker = false"
        @confirm="onConfirm"
      />
    </van-popup>
    <template v-if="listTotal > 0">
      <div class="earnList" v-for="earnItem in earnList" :key="earnItem.id">
        <div class="spaceBetween">
          <div class="name">{{earnItem.company.companyName}}</div>
          <div class="money">¥ {{earnItem.amountCollected}}</div>
        </div>
        <!-- <div class="company">{{earnItem.company}}</div> -->
        <div class="time">{{earnItem.createTime | moment("MM月DD日  HH:mm")}}</div>
      </div>
    </template>
    <van-empty v-else-if="listTotal == 0" description="当前月份没有收益哦～" />
    <van-empty v-else-if="listTotal == -1" image="error" description="获取记录出错" />
  </div>
</template>

<script>
import { checkEarnRecord } from '@/api/check'
import { Toast } from 'vant'
export default {
  data () {
    return {
      showPicker: false,
      // 点击确认选择的时间
      chooseDate: new Date(),
      minDate: new Date(2018, 0, 1),
      maxDate: new Date(),
      // 时间选择器当前的时间
      currentDate: new Date(),
      pageNum: 1,
      pageSize: 50,
      earnList: [],
      listTotal: null
    }
  },
  methods: {
    // 查询
    selectRecord (startTime) {
      Toast.loading({
        forbidClick: true,
        duration: 0
      })
      const $this = this
      const pageNum = $this.pageNum
      const pageSize = $this.pageSize
      checkEarnRecord(pageNum, pageSize, startTime).then(res => {
        console.log('checkEarnRecord', res)
        Toast.clear()
        $this.earnList = res.data.data.list
        $this.listTotal = res.data.data.total
      }).catch(() => {
        Toast.clear()
        $this.listTotal = -1
      })
    },
    formatter (type, val) {
      if (type === 'year') {
        return `${val}年`
      } else if (type === 'month') {
        return `${val}月`
      }
      return val
    },
    onConfirm (value) {
      const startTime = new Date(value).getTime()
      console.log(startTime)
      this.chooseDate = value
      this.showPicker = false
      this.selectRecord(startTime)
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created () {
    const startTime = this.chooseDate.getTime()
    this.selectRecord(startTime)
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
.chooseTime{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background: #ffffff;
  height: 28px;
  border-radius: 15px;
  width: 110px;
  margin: 10px 10px;
}
.earnList{
  background: #ffffff;
  padding: 8px 15px;
  border-bottom: 1px solid #eeeeee;
}
.spaceBetween .name{
  font-size: 14px;
  width: 280px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.money{
  font-size: 15px;
  color: #101010;
}
.earnList .company{
  font-size: 12px;
  color: #777777;
  margin-top: 5px;
}
.earnList .time{
  margin-top: 3px;
  font-size: 12px;
  color: #aaaaaa;
}
</style>
